<template>
  <el-container class="admin">
    <el-aside width="200px" class="aside">
      <h1>
        <img src="/static/images/logintitle.png" class="title" />
      </h1>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#3398cc"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item v-for="(item, key) in adminMenu" :key="key">
            <nuxt-link 
                :to='item.link'>
                <i :class="item.icon"></i>
                {{item.label}}
            </nuxt-link>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container class="content">
      <el-header class="header" height="48px">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar shape="square" class="square" :size="30"></el-avatar>
            小米同学
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><i class="el-icon-key"></i> 修改密码</el-dropdown-item>
            <el-dropdown-item><i class="el-icon-position"></i> 安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main class="main"><nuxt/></el-main>
      <el-footer class="footer" height="40px">
          <p>power by yuanyexu design</p>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import { mapMutations, mapGetters, mapActions} from 'vuex';
export default {
  data() {
    return {
      activeIndex: "",
    };
  },
  computed: {
    ...mapGetters('admin', ['adminMenu'])
  }
};
</script>
<style lang="stylus">
.admin 
  background-color #F4F4F4
.el-main
  padding 10px
  margin 10px
  background #ffffff
  text-align left
  overflow hidden
  box-shadow 0 0 8px rgba(0,0,0,0.1)
  border-radius 5px
</style>
<style scoped>
.admin {
  width: 100%;
  height: 100%;
  position: fixed;
}
.header {
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.footer {
  height: 40px;
  box-shadow: -1px -2px 4px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.footer p {
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    color: #666
}
.aside {
  width: 200px;
  background: #3398cc;
}
.content {
  height: 100%;
  background: #fff;
}
.el-dropdown-link {
  display: block;
  height: 48px;
  line-height: 48px;
  cursor: pointer;
}
.el-dropdown-link .square{
    margin: 9px 4px;
    float: left;
}
.el-menu {
    border-right: none;
}
.el-menu a{
    display: block;
    color: #fff;
}
.el-menu a i {
    color: #fff;
}
.title {
  width: 80%;
  margin: 10%;
}
</style>